<template>
  <div class="cooperate">
<div class="top">
  <van-nav-bar
  title="合作机构"
  left-arrow
  @click-left="back"
/>
  <div class="fixe">
     <img src="../../image/a13.png" alt="">
  <h2>精选服务</h2>
  <p>无痛胃肠镜、飞秒手术等</p>
  <button @click="gochoice">去看看<van-icon name="play" /></button>
  </div>
  <div class="menu">
  <span class="span1">合作机构</span>
  <span class="location">
    <homeMapLocation></homeMapLocation>
  </span>
</div>
</div>
<div class="bottom">
<!-- 列表盒子 -->
<div class="box">
  <homeHealth />
</div>
</div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import homeHealth from '../components/home/homeHealth.vue'
import homeMapLocation from '../components/home/homeMapLocation.vue'
const router = useRouter()
// 返回上一页
const back = () => {
  router.back()
}
// 跳转到精选服务页面
const gochoice = () => {
  router.push('/choice')
}
</script>

<style scoped>
.cooperate{
  width: 100%;
  height: 100%;
  background: #f4f5f7;
}
.top{
  width: 100%;
  height: 2rem;
  background: #fff7ee;
  position: sticky;
  top: 0;
  z-index: 10;
}
.fixe{
  width: 100%;
  height: 1rem;
  position: relative;
}
.fixe img{
  position: absolute;
  top: .2rem;
  left: .15rem;
}
.fixe h2{
  position: absolute;
  top: .2rem;
  left: .8rem;
}
.fixe p{
  font-size: .15rem;
  color: #9398a1;
  position: absolute;
  top: .55rem;
  left: .8rem;
}
.fixe button{
  width: .8rem;
  height: 0.3rem;
  background: #fea824;
  color: #fff;
  border: none;
  border-radius: .2rem;
  position: absolute;
  right: .1rem;
  top: .35rem;
}
.bottom{
  width: 100%;
  height: 100%;
  margin-top: .1rem;
}
.menu{
  width: 100%;
  height: 0.5rem;
  background: #fff;
  border-bottom: .01rem solid #ccc;
}
.menu .span1{
    float: left;
    margin-left: .1rem;
    margin-top: .15rem;
}
.menu .location{
  float: right;
  margin-right: .1rem;
  margin-top: .15rem;
}
</style>
